<template>
    <el-dialog
    :model-value="props.visible"
    :title="props.title"
    :width="props.width + 'px'"
    :before-close="onClose"
  >
  <!-- 内容显示区 -->
    <div class="container" :style="{height: height+ 'px'}">
    <slot name="content"></slot>
    </div>
    <template #footer>
        <span class="dialog-footer">
            <el-button type="danger" @click="onClose">取消</el-button>
            <el-button type="primary" @click="onConfirm">确定</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
//定义弹框的数据类型
interface DialogProps{
    title:string,
    visible:boolean,
    width:number,
    height:number
}
//接收父组件传递的参数
const props = withDefaults(defineProps<DialogProps>(),{
    title:'新增',
    visible:false,
    width:630,
    height:280
})
//注册事件
const emit = defineEmits(["onClose","onConfirm"])
//弹框关闭
const onClose = ()=>{
    emit('onClose');
}
//弹框确定
const onConfirm = ()=>{
    emit('onConfirm');
}
</script>

<style scoped>

</style>